<template>
    <el-dialog :visible.sync="visible" :close-on-click-modal="false" :before-close="closeExtr" title="知识点抽取" width="80%"
        style="min-width: 800px">
        <iframe :height="windowHeight * 0.8" :src="iframeUrl" width="100%" />
    </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import { saveDataGetId } from "@/api/course/course";

export default {
    name: "KnowledgeExtractDialog",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        courseId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            iframeUrl: "",
            iframeBaseUrl: "",
            windowHeight:
                window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
            tempId: "" // 临时ID，用于新课程
        };
    },
    computed: {
        ...mapGetters(["zlBaseUrl"])
    },
    created() {
        this.iframeBaseUrl = `${this.zlBaseUrl}/#/navigation/documentIpt`;
    },
    mounted() {
        window.addEventListener("message", this.handleMessage);
    },
    beforeDestroy() {
        window.removeEventListener("message", this.handleMessage);
    },
    methods: {
        async showExtr(item) {
            if (!this.courseId) {
                // 如果没有课程ID，先创建课程
                const courseRes = await this.saveCourse();
                if (courseRes.data) {
                    this.setupIframeUrl(item, courseRes.data);
                } else {
                    this.$message.error("课程保存失败，请重试");
                }
            } else {
                this.setupIframeUrl(item, this.courseId);
            }
        },

        async showZLUpload() {
            if (!this.courseId) {
                // 如果没有课程ID，先创建课程
                const courseRes = await this.saveCourse();
                if (courseRes.data) {
                    this.iframeUrl = `${this.iframeBaseUrl}?courseId=${courseRes.data
                        }&time=${new Date().getTime()}`;
                    this.$emit('update:visible', true);
                } else {
                    this.$message.error("课程保存失败，请重试");
                }
            } else {
                this.iframeUrl = `${this.iframeBaseUrl}?courseId=${this.courseId
                    }&time=${new Date().getTime()}`;
                this.$emit('update:visible', true);
            }
        },

        setupIframeUrl(item, courseId) {
            this.iframeUrl = `${this.iframeBaseUrl}?filepath=${item.fileUrl}&fileId=${item.fileId
                }&courseId=${courseId}&time=${new Date().getTime()}`;
            this.$emit('update:visible', true);
        },

        async saveCourse() {
            // 创建临时课程ID
            this.tempId = `temp_${Math.random().toString(36).substring(2, 15)}`;
            // 时间段覆盖 - 这部分需要传递实际的表单数据
            const postForm = {
                id: this.tempId,
                startTime: new Date(),  // 默认值，实际应该从父组件传递
                endTime: new Date()     // 默认值，实际应该从父组件传递
            };

            // 保存课程，获取课程id
            return saveDataGetId(postForm);
        },

        handleMessage(res) {
            if (res.data && res.data instanceof Object) {
                if (res.data.closeIframe) {
                    this.closeExtr();
                }
            }
        },

        closeExtr() {
            this.$emit('update:visible', false);
        }
    }
};
</script>
